<template>
  <a-modal
    title="编辑用户"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :destroyOnClose="true"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户名">
          <a-input
            placeholder="用户名"
            v-decorator="['login', { rules: [{ required: true, message: '用户名不能为空！' }] }]"
            disabled="disabled"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="真实姓名">
          <a-input
            placeholder="真实姓名"
            v-decorator="['userName', { rules: [{ required: true, message: '真实姓名不能为空！' }] }]"
          />
        </a-form-item>
        <!-- <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="权限"
        >
          <a-radio-group placeholder="权限" v-decorator="['dictKey', {rules: [{required: true, message: '真实姓名不能为空！'}]}]" >
            <a-radio :value="1">系统管理员</a-radio>
            <a-radio :value="2">维护管理员</a-radio>
            <a-radio :value="3">一般用户</a-radio>
          </a-radio-group>
        </a-form-item> -->

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色名称" hasFeedback>
          <a-select
            style="width: 100%"
            :allowClear="true"
            placeholder="角色名称"
            v-decorator="['tRole', { rules: [{ required: true, message: '赋予权限不能为空！' }] }]"
          >
            <a-select-option v-for="(action, index) in tRoleList" :key="index" :value="action.name">{{
              action.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态">
          <a-select
            placeholder="状态"
            v-decorator="['activated', { rules: [{ required: true, message: '状态不能为空！' }] }]"
          >
            <a-select-option value="1">正常</a-select-option>
            <a-select-option value="0">禁用</a-select-option>
          </a-select>
          <!-- <a-switch checked-children="是" un-checked-children="否" v-decorator="['activated']" @change="checkedChange" /> -->
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="邮箱">
          <a-input
            placeholder="邮箱"
            id="contact_email"
            v-decorator="[
              'email',
              {
                rules: [
                  {
                    pattern: new RegExp(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, 'g'),
                    message: '邮箱格式不正确',
                  },
                  { required: true, message: '邮箱不能为空！' },
                ],
              },
            ]"
          />
        </a-form-item>

        <!-- <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="密码"
        >
          <a-input placeholder="密码" type="password" v-decorator="['password', {rules: [{required: true, message: '密码不能为空！'},{validator: validateToNextPassword}]}]" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="确认密码"
        >
          <a-input placeholder="确认密码" type="password" v-decorator="['confirm', {rules: [{required: true, message: '确认密码不能为空！'},{validator: compareToFirstPassword}]}]" />
        </a-form-item> -->

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系电话">
          <a-input
            placeholder="联系电话"
            v-decorator="[
              'phone',
              {
                rules: [
                  { pattern: new RegExp(/^1[3|4|5|6|7|8|9]\d{9}$/, 'g'), message: '请输入正确的手机号码' },
                  { required: true, message: '联系电话不能为空！' },
                ],
              },
            ]"
          />
        </a-form-item>

        <!-- <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="描述"
        >
          <a-input placeholder="描述" v-decorator="['description',{rules: [{required: true, message: '描述不能为空！'}]}]" type="textarea"/>
        </a-form-item> -->
        <!-- <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="创建时间"
        >
          <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="创建时间" @change="createdChange" v-decorator="['created_time',{rules: [{required: true, message: '创建时间不能为空！'}]}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="创建人"
        >
          <a-input placeholder="创建人" v-decorator="['created_by',{rules: [{required: true, message: '创建人不能为空！'}]}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="更新时间"
        >
          <a-date-picker
            showTime
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="更新时间"
            v-decorator="['update_time',{rules: [{required: true, message: '更新时间不能为空！'}]}]"
            @change="updateChange"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="修改人"
        >
          <a-input placeholder="修改人" v-decorator="['update_by',{rules: [{required: true, message: '修改人不能为空！'}]}]"/>
        </a-form-item> -->
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { editUsersManage } from '@/api/user'
export default {
  name: 'EditUsersManageModal',
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      mdl: {},
      update_time: '2020-04-28 07:02:00',
      form: this.$form.createForm(this)
    }
  },
  // 父组件传来的角色
  props: {
    tRoleList: {
      type: Array,
      default: null
    }
  },
  methods: {
    // 选中创建时间
    createdChange (value, dateString) {
      console.log('Formatted Selected Time: ', dateString)
    },
    // 选中创建时间
    updateChange (value, dateString) {
      console.log('Formatted Selected Time: ', dateString)
    },
    compareToFirstPassword (rule, value, callback) {
      const form = this.form
      if (value && value !== form.getFieldValue('password')) {
        // callback('Two passwords that you enter is inconsistent!')
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    },
    validateToNextPassword (rule, value, callback) {
      const form = this.form
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true })
      }
      callback()
    },
    edit (record) {
      this.mdl = Object.assign({}, record)
      console.log('接收列表行参数-----', this.mdl)
      this.visible = true
      const {
        form: { setFieldsValue }
      } = this
      this.$nextTick(() => {
        setFieldsValue({
          id: this.mdl.id,
          login: this.mdl.login,
          email: this.mdl.email,
          activated: this.mdl.activated,
          phone: this.mdl.phone,
          userName: this.mdl.userName,
          tRole: this.mdl.tRole ? this.mdl.tRole.name : ''
          // createdDate: this.mdl.createdDate,
          // createdBy: this.mdl.createdBy
          // created_time: moment(this.mdl.created_time),
          // created_by: this.mdl.created_by,
          // update_time: moment(this.mdl.update_time),
          // update_by: this.mdl.update_by
        })
      })
    },

    handleSubmit () {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true

      validateFields((errors, values) => {
        console.log('errors:', errors, 'val:', values)
        values.id = this.mdl.id
        values.password = this.mdl.password
        values.created_by = this.mdl.created_by
        values.created_date = moment(this.mdl.created_date)
        values.last_modified_by = this.mdl.last_modified_by
        values.last_modified_date = moment(this.mdl.last_modified_date)
        values.authorities = this.mdl.authorities
        this.tRoleList.forEach((item) => {
          if (values.tRole) {
            if (values.tRole === item.name) {
              values.tRole = item
              values.tRole.createDate = moment.utc(values.tRole.createDate)
              values.tRole.modifyDate = moment.utc(values.tRole.modifyDate)
            }
          }
        })
        // values.tRole = JSON.parse(values.tRole)
        console.log('修改参数:', values)
        if (!errors) {
          editUsersManage(values).then((res) => {
            if (res) {
              // 存储成功、刷新列表
              this.$emit('ok', values)
              this.visible = false
              this.confirmLoading = false
              this.$notification['success']({
                message: '提示',
                description: '数据修改成功！'
              })
            }
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
    }
  }
}
</script>
